<template>
	<view class="body">
		<view class="banner-content">
			<component-banner :propData="banner_list"></component-banner>
			<!-- <image class="image" src="https://s1.ax1x.com/2022/11/16/zZacQA.png"></image> -->
		</view>
		<view class="icon_frame1">
			<view v-for="(item,index) in iconList1" :key="index" @click="ClickIcon(item)">
				<view class="icon_border1">
					<image class="icon_image1" :src="item.imageUrl"></image>
					<view class="icon_title1">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="gold_top">
			<view class="gold_top_left">
				推荐产品
			</view>
		</view>
		<view class="icon_frame">
			<view v-for="(item,index) in iconList" :key="index" @click="ClickIcon(item)">
				<view class="icon_border">
					<image class="icon_image" :src="item.imageUrl"></image>
					<view class="icon_title">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view v-for="(item,index) in iconList3" :key="index" @click="ClickShop(item.id)">
			<view class="right_goods_info">
				<view class="right_goods_image">
					<image :src="item.image"></image>
				</view>
				<view class="right_goods_info_title">
					<view class="storeName">
						{{item.storeName}}
					</view>
					<view class="neiron">{{item.specType}}</view>
					<view class="price">
						￥{{item.vipPrice}}
					</view>
				</view>
				<view class="right_goods_info_right">
					<view @click.stop="handleAddShopping(item.id)">+ 购物袋</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import componentBanner from "../../components/slider/slider";
	import util from "@/util/index.js"
	export default {
		data() {
			return {
				util: util,
				banner_list: [{
					name: '轮播1',
					images_url: 'https://s1.ax1x.com/2022/03/15/bvgAr6.png'
				}],
				iconList: [{
						name: '养生',
						imageUrl: 'https://s1.ax1x.com/2022/11/16/zZajoT.png',
						path: '/subpackages/fenlei/fenlei?item=' + 0
					},
					{
						name: '生活',
						imageUrl: 'https://s1.ax1x.com/2022/11/16/zZaOe0.png',
						path: '/subpackages/fenlei/fenlei?item=' + 1
					},
					{
						name: '美食',
						imageUrl: 'https://s1.ax1x.com/2022/11/16/zZaqLq.png',
						path: '/subpackages/fenlei/fenlei?item=' + 2
					}, {
						name: '美容',
						imageUrl: 'https://s1.ax1x.com/2022/11/16/zZaXwV.png',
						path: '/subpackages/fenlei/fenlei?item=' + 3
					}
				],
				iconList1: [{
						name: '分类',
						imageUrl: '/static/3x/fenlei.png',
						path: '/subpackages/fenlei/fenlei'
					},
					{
						name: '购物袋',
						imageUrl: '/static/3x/gouwudai.png',
						path: '/subpackages/gouwudai/gouwudai'
					}, {
						name: '订单',
						imageUrl: '/static/3x/dingdan.png',
						path: '/subpackages/dingdan/dingdan'
					}, {
						name: '我的',
						imageUrl: '/static/3x/wode.png',
						path: '/subpackages/wode/wode'
					}
				],
				iconList3: [],
				rightList: [],
			}
		},
		components: {
			componentBanner
		},
		methods: {
			//点击查看商品详情
			ClickShop(id) {
				uni.navigateTo({
					//分包名/路径
					url: '/subpackages/goods_list/goods_list?id=' + id
				})
			},
			//加入购物车
			handleAddShopping(id) {
				this.$http({
					url: '/crmStoreCart/insCrmStoreCart',
					data: {
						productId: id,
						cartNum: 1,
						shoppingBag: 1 //购物袋
					},
				}).then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: "添加成功",
							icon: "none"
						}).then(this.Shopshow = false)
					}
				})
			},
			SearchBanner() {
				this.$http({
					url: '/crmBanner/selectCrmBannerList'
				}).then(res => {
					this.banner_list = res.data.data.map(item => {
						return {
							...item,
							imageUrl: this.util.imageApi + item.imageUrl
						}
					})
				})
			},
			SearchTuijian() {
				this.iconList3 = []
				this.$http({
					url: '/getInfo'
				}).then(res => {
					res.data.data.forEach(item => {
						if (item.stock == 1) {
							this.iconList3.push({
								...item,
								image: this.util.imageApi + item.image
							})
						}
					})
				})
			},
			ClickIcon(item) {
				uni.navigateTo({
					url: item.path
				})
			},
		},
		onShow() {
			this.SearchBanner()
			this.SearchTuijian()
		}
	}
</script>
<style lang="scss" scoped>
	@import './index.css';

	.u-demo-block__content {
		@include flex(column);
	}
</style>
